<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>最佳拍档</title>
    <meta name="keywords" content="最佳拍档">
    <meta name="description" content="最佳拍档">
<!--    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/common/admin/css/style.css}">-->
<!--    <script th:src="@{/layui/layui.js}" src="/layui/layui.js"></script>-->
<!--    <script th:src="@{/common/js/jquery-3.3.1.min.js}" src="/common/js/jquery-3.3.1.min.js"></script>-->
<!--    <script th:src="@{/common/js/vue.min.js}" src="/common/js/vue.min.js"></script>-->
    <style>
        .right h2{
            margin: 10px 0;
        }
        .right li{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<!--右侧-->
<div class="right p20">
    <div style="display: flex;justify-content: space-between;width: 600px;">
        <div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select name="type" id="typeSelect" lay-filter="TypeSelect">
                            <option value="BrandMerchants">品牌商家</option>
                            <option value="GroupLeader">团购团长</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: flex">
            <div>
                <button type="button" class="layui-btn" th:onclick="changeWeek(-1)">
                    上一周
                </button>
            </div>
            <div style="padding-left: 10px;">
                <button type="button" class="layui-btn" th:onclick="changeWeek(1)">
                    下一周
                </button>
            </div>
        </div>
    </div>
    <div style="width: 600px;">
        <table class="layui-table layui-form" lay-filter="ReportTable" id="ReportTable">
            <thead>
            <tr class="id36567">
                <th lay-data="{field:'weekDay',align:'center'}">周日期</th>
                <th lay-data="{field:'workNum',align:'center'}">客户数量（条）</th>
            </tr>
            </thead>
        </table>
    </div>

</div>
</body>
<script>
    layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
        let layer = layui.layer, table = layui.table;
        let tableOptions = {
            elem: '#ReportTable',
            url: '/customer/log/list',
            method: 'POST',
            id: 'ReportTable', //生成 Layui table 的标识 id，必须提供，用于后文刷新操作，笔者该处出过问题
            where: { offset: "0" },
            response: { //定义后端 json 格式，详细参见官方文档
                statusName: 'code', //状态字段名称
                statusCode: '200', //状态字段成功值
                msgName: 'msg', //消息字段
                countName: 'total', //总数字段
                dataName: 'rows' //数据字段
            }
        };
        // 表初始化
        var createTable = function () {
            table.init('ReportTable', tableOptions);// table lay-filter
        };
        // 表刷新方法
        var reloadTable = function (item) {
            table.reload("ReportTable", { //此处是上文提到的 初始化标识id
                where: {
                    type: item.type, id: item.id
                }
            });
        };
        // 表初始化
        createTable();
    });

    //查询品牌商家报表数据
    //offset:0:当前周，-1:上周，+1:下周
    function getDataByOffset(offset){
        layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer, table = layui.table;
            let tableOptions = {
                elem: '#ReportTable',
                url: '/customer/log/list',
                method: 'POST',
                where: { offset: offset }, //请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了
                response: { //定义后端 json 格式，详细参见官方文档
                    statusName: 'code', //状态字段名称
                    statusCode: '200', //状态字段成功值
                    msgName: 'msg', //消息字段
                    countName: 'total', //总数字段
                    dataName: 'rows' //数据字段
                }
            };
            // 表初始化
            var createTable = function () {
                table.init('ReportTable', tableOptions);// table lay-filter
            };
            // 表初始化
            createTable();
        });
    }

    //查询团长团购报表数据
    //offset:0:当前周，-1:上周，+1:下周
    function getGroupLeaderData(offset){
        layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer, table = layui.table;
            let tableOptions = {
                elem: '#ReportTable',
                url: '/community/log/list',
                method: 'POST',
                where: { offset: offset }, //请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了
                response: { //定义后端 json 格式，详细参见官方文档
                    statusName: 'code', //状态字段名称
                    statusCode: '200', //状态字段成功值
                    msgName: 'msg', //消息字段
                    countName: 'total', //总数字段
                    dataName: 'rows' //数据字段
                }
            };
            // 表初始化
            var createTable = function () {
                table.init('ReportTable', tableOptions);// table lay-filter
            };
            // 表初始化
            createTable();
        });
    }

    //切换分类查看报表数据
    layui.use('form', function(){
        let form = layui.form;
        form.on('select(TypeSelect)', function(data){
            if(data.value == "BrandMerchants"){
                getDataByOffset(0)
            }else if(data.value == "GroupLeader"){
                getGroupLeaderData(0)
            }
        });
    });

    //点击上一周/下一周
    function changeWeek(offset) {
        let selected_val = $('#typeSelect option:selected').val()
        if(selected_val == "BrandMerchants"){
            getDataByOffset(offset)
        }else if(selected_val == "GroupLeader"){
            getGroupLeaderData(offset)
        }
    }

    //初始化导航栏选中
    window.onload=function(){
        let url = window.location.pathname;
        if(url=="/" || url=="/Admin"){

        }else{
            $('a[href="'+url+'"]').parent().addClass('layui-this');
            $('a[href="'+url+'"]').parent().parent().parent().addClass('layui-nav-itemed');
        }
    }
</script>
</html>